<template>
  <div>
    <canvas id="matrix-bg"></canvas>
    <header class="main-header">
      <div class="header-left">
        <img src="../assets/cwnu.png" alt="logo" class="header-logo" />
        <span class="header-title">西华师范大学计算机学院第一届指法大赛</span>
      </div>
    </header>
    <div class="login-container">
      <form class="login-form" @submit.prevent="onLogin">
        <h2 class="login-title">登录系统</h2>
        <div class="form-group">
          <label for="username">学号/工号</label>
          <input id="username" v-model="form.username" type="text" autocomplete="off" placeholder="请输入学号/工号" />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码" />
        </div>
        <div class="form-group">
          <button type="submit" class="login-btn">登录</button>
        </div>
        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
      </form>
    </div>
    <footer class="main-footer">
      © 西华师范大学计算机学院
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()
const form = ref({
  username: '',
  password: ''
})
const errorMsg = ref('')

async function onLogin () {
  errorMsg.value = ''
  if (!form.value.username || !form.value.password) {
    errorMsg.value = '请输入学号/工号和密码'
    return
  }

  // 检查是否是管理员账号
  if (form.value.username === '202113840501' && form.value.password === 'CDD520') {
    // 存储管理员信息
    const adminInfo = {
      id: -1,
      name: '管理员',
      username: form.value.username,
      isAdmin: true
    }
    localStorage.setItem('userInfo', JSON.stringify(adminInfo))
    router.push('/admin')
    return
  }

  try {
    console.log('Sending login request...')
    const response = await request.post('/users/login', {
      username: form.value.username,
      password: form.value.password
    })
    console.log('Response:', response)

    if (response.data.code === 0) {
      // 存储用户信息到 localStorage
      const userInfo = {
        ...response.data.user,
        isAdmin: false
      }
      localStorage.setItem('userInfo', JSON.stringify(userInfo))
      router.push('/home')
    } else {
      errorMsg.value = response.data.message || '登录失败'
    }
  } catch (error) {
    console.error('Login error:', error)
    errorMsg.value = error.response?.data?.message || '网络错误，请稍后重试'
  }
}

// 黑客帝国数字雨动画
onMounted(() => {
  const canvas = document.getElementById('matrix-bg')
  const ctx = canvas.getContext('2d')
  let width = window.innerWidth
  let height = window.innerHeight
  canvas.width = width
  canvas.height = height

  const fontSize = 18
  const columns = Math.floor(width / fontSize)
  const drops = Array(columns).fill(1)
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'

  function draw () {
    // 保证canvas尺寸和窗口一致
    if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
      width = window.innerWidth
      height = window.innerHeight
      canvas.width = width
      canvas.height = height
    }
    ctx.fillStyle = 'rgba(0, 0, 0, 0.08)'
    ctx.fillRect(0, 0, width, height)
    ctx.font = fontSize + 'px monospace'
    ctx.fillStyle = '#0F0'
    for (let i = 0; i < drops.length; i++) {
      const text = chars[Math.floor(Math.random() * chars.length)]
      ctx.fillText(text, i * fontSize, drops[i] * fontSize)
      if (drops[i] * fontSize > height && Math.random() > 0.975) {
        drops[i] = 0
      }
      drops[i]++
    }
  }

  const interval = setInterval(draw, 40)

  // 响应窗口大小变化
  function resize () {
    width = window.innerWidth
    height = window.innerHeight
    canvas.width = width
    canvas.height = height
  }
  window.addEventListener('resize', resize)

  onBeforeUnmount(() => {
    clearInterval(interval)
    window.removeEventListener('resize', resize)
  })
})
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  z-index: 2;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-logo {
  height: 40px;
  margin-right: 16px;
}
.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  letter-spacing: 2px;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 64px - 44px);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.login-form {
  width: 320px;
  padding: 32px 24px 24px 24px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.login-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-size: 22px;
  font-weight: 600;
}
.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 6px;
  color: #666;
  font-size: 15px;
}
input[type="text"], input[type="password"] {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
  transition: border 0.2s;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: #42b983;
}
.login-btn {
  width: 100%;
  padding: 10px 0;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.login-btn:hover {
  background: #36996b;
}
.error-msg {
  color: #e74c3c;
  text-align: center;
  margin-top: 8px;
  font-size: 15px;
}
#matrix-bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: #000;
}
.main-header, .main-footer {
  position: relative;
  z-index: 1;
}
</style>

<style>
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

<style>
.main-footer {
  width: 100%;
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 15px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.03);
}
</style>
